<template>
  <div class='slide'>
    <el-menu
      :default-active="defaultActive"
      class="el-menu-slide"
      background-color="#545c64"
      text-color="#fff"
      :collapse="isCollapse"
      :router="router">
      <div class='logo'>
        <svg class="icon" style="width: 2.5em; height: 2.5em;vertical-align: middle;fill: currentColor;overflow: hidden;" viewBox="0 0 1024 1024"><path d="M512.268258 64.430032c-247.183323 0-447.569968 200.384597-447.569968 447.57304 0 247.1823 200.385621 447.56792 447.569968 447.56792s447.569968-200.385621 447.569968-447.56792c0-247.189467-200.386645-447.57304-447.569968-447.57304z m250.63996 279.572912L513.037196 588.684915l-252.244389-244.681971h502.115411z m-519.180508 35.60766l139.605741 133.484953-139.605741 130.956981V379.610604z m17.561682 300.386452L409.779385 534.941175l102.685459 98.191626 101.170109-98.191626 150.007391 145.055881H261.289392z m519.519413-35.944518L637.395236 512.731054l143.413569-135.081191v266.402675z" fill="#ccc"></path></svg>      </div>
      <el-menu-item index="1" route="/write" title="新邮件">
        <i class="el-icon-close"></i>
        <span slot="title">写信</span>
      </el-menu-item>
      <el-menu-item index="2" route="/letter" title="查看邮件">
        <i class="el-icon-message"></i>
        <span slot="title">信件</span>
      </el-menu-item>
      <el-submenu
        index="3"
        title="查看账户">
          <template slot="title">
          <svg class="icon svg-icon" viewBox="0 0 1024 1024"><path d="M772.016477 696.022177c-39.228443-39.229466-85.763292-68.49807-136.530536-86.546122 26.774807-13.283538 51.500954-30.976502 73.254398-52.729945 52.55189-52.550867 81.494059-122.422214 81.494059-196.74085s-28.941146-144.189983-81.494059-196.741873c-52.550867-52.550867-122.422214-81.493036-196.74085-81.493036s-144.189983 28.942169-196.741873 81.493036c-52.55189 52.550867-81.494059 122.422214-81.494059 196.741873s28.941146 144.189983 81.494059 196.74085c21.753443 21.753443 46.480614 39.446407 73.256444 52.729945-50.76929 18.049075-97.303116 47.316655-136.532583 86.546122-66.188468 66.187445-104.009865 153.166425-107.422591 246.208495l48.730864 0c3.387144-80.028685 36.140105-154.783249 93.129051-211.770148 55.771211-55.771211 128.557958-88.326675 206.650547-92.867084 6.27389 0.418532 12.582573 0.645706 18.929118 0.645706 6.345522 0 12.656251-0.227174 18.929118-0.645706 78.091566 4.54041 150.880359 37.095873 206.650547 92.867084 56.987922 56.986899 89.741907 131.741463 93.129051 211.770148l48.730864 0C876.027365 849.188602 838.204945 762.209622 772.016477 696.022177zM282.466792 360.004237c0-126.564557 102.96814-229.53372 229.53372-229.53372 126.564557 0 229.53372 102.969163 229.53372 229.53372 0 120.304993-93.040023 219.280192-210.942293 228.77545-6.170536-0.304945-12.369725-0.460488-18.591427-0.460488-6.222725 0-12.420891 0.155543-18.59245 0.460488C375.505791 579.284429 282.466792 480.30923 282.466792 360.004237z"></path></svg>
          <span>账户</span>
        </template>
        <el-menu-item :key='user.email' :route='thisRoute' :index="'3-' + index" @click='change(user)' v-for='(user, index) in userList'>{{user.email}}</el-menu-item>
        <el-menu-item index='3-' :route='thisRoute' @click='addUser'>
          <i class="el-icon-close el-my-close"></i>
          添加账户
          </el-menu-item>
      </el-submenu>
      <el-menu-item index="4" route="/addressList" title="通讯录">
        <svg class="icon svg-icon" viewBox="0 0 1024 1024"><path d="M798.971 895.012c-3.127-52.035-23.773-92.807-63.126-124.629-32.905-26.613-74.417-42.998-111.035-57.456-44.735-17.662-83.53-32.982-95.235-59.844-1.822-21.682-1.67-38.509-1.495-57.877 0.019-2.946 0.048-5.938 0.067-8.999 9.526-9.517 17.662-23.763 23.361-35.477 5.181-10.639 13.632-30.277 17.892-52.601 6.235-3.204 11.963-8.011 16.798-14.179 9.536-12.165 15.733-29.673 18.419-52.035 2.505-20.846-3.559-36.896-11.925-47.459 5.362-18.218 12.951-48.783 15.724-83.367 3.885-48.447-3.146-87.493-20.895-116.071-16.443-26.468-41.347-43.132-74.109-49.617-18.074-22.833-52.678-35.275-98.851-35.275-0.115 0-0.231 0-0.355 0.009-70.426 1.285-121.962 22.813-153.189 63.959-37.002 48.754-43.881 122.633-20.492 219.729-8.634 10.563-14.994 26.833-12.433 48.092 2.686 22.362 8.884 39.871 18.41 52.035 4.854 6.188 10.601 11.003 16.855 14.208 6.553 33.107 24.617 70.406 42.211 87.982 0.019 3.012 0.038 5.967 0.068 8.864 0.163 19.436 0.317 36.321-1.516 58.079-11.703 26.852-50.663 42.173-95.58 59.844-36.753 14.457-78.417 30.833-111.447 57.446-39.506 31.822-60.228 72.594-63.355 124.629-0.317 5.286 1.564 10.457 5.181 14.314 3.626 3.847 8.682 6.023 13.968 6.023l726.928 0c5.296 0 10.342-2.178 13.968-6.023 3.626-3.857 5.507-9.027 5.19-14.303zM74.487 876.968c5.843-31.284 20.971-55.997 46.682-76.71 28.454-22.928 65.543-37.51 101.413-51.623 52.409-20.607 101.911-40.082 118.384-84.366 0.594-1.602 0.969-3.271 1.122-4.97 2.255-24.991 2.092-44.245 1.919-64.622-0.048-5.661-0.096-11.513-0.096-17.623 0-7.042-3.857-13.508-10.026-16.855-7.311-5.161-30.459-42.623-34.306-78.686-0.979-9.172-8.337-16.347-17.518-17.095-2.437-0.202-12.27-7.071-15.877-37.079-1.852-15.379 5.641-20.818 5.689-20.846 7.214-4.403 10.697-13.018 8.576-21.202-11.271-43.362-16.261-81.927-14.831-114.633 1.507-34.604 10.237-62.655 25.961-83.367 23.735-31.275 65.168-47.69 123.152-48.793 35.803 0.029 62.262 8.979 70.791 23.955 2.946 5.171 8.125 8.692 14.026 9.507 25.548 3.549 43.66 14.448 55.373 33.308 29.376 47.287 12.375 134.635-2.303 178.794-2.821 8.49 0.557 17.777 8.202 22.42 0.077 0.057 7.54 5.468 5.698 20.857-3.607 30.007-13.441 36.877-15.877 37.079-9.181 0.748-16.539 7.925-17.518 17.086-3.876 36.254-26.276 73.593-33.347 78.714-6.14 3.367-9.967 9.814-9.967 16.837 0 6.178-0.057 12.087-0.106 17.806-0.182 20.329-0.355 39.516 1.899 64.439 0.154 1.698 0.528 3.367 1.122 4.97 16.462 44.265 65.782 63.739 117.99 84.346 35.717 14.103 72.661 28.685 101.001 51.604 25.614 20.722 40.676 45.435 46.5 76.748l-683.728 0zM985.075 805.764c-3.626 3.847-8.673 6.023-13.958 6.023l-117.683 0c-10.591 0-19.187-8.587-19.187-19.187 0-10.591 8.596-19.187 19.187-19.187l95.791 0c-5.228-23.935-17.374-43.074-37.347-59.221-23.495-19.005-54.385-31.198-84.269-42.979-44.61-17.604-86.754-34.239-101.095-72.777-0.605-1.602-0.979-3.281-1.132-4.979-1.899-21.154-1.756-37.386-1.602-54.567 0.038-4.816 0.086-9.795 0.086-14.994 0-6.937 3.742-13.315 9.747-16.713 6.437-5.199 23.724-35.689 26.775-64.065 0.969-9.066 8.193-16.183 17.258-17.047 1.746-0.643 8.288-7.061 10.879-28.598 1.247-10.389-3.118-14.323-3.569-14.707-7.522-4.682-10.86-13.911-8.068-22.334 12.193-36.705 26.391-109.174 2.265-148.009-9.363-15.071-23.917-23.792-44.485-26.661-5.9-0.816-11.079-4.336-14.026-9.517-6.523-11.465-28.339-18.592-56.957-18.621-11.445 0.22-22.237 1.161-32.091 2.801-10.448 1.735-20.338-5.324-22.074-15.781-1.735-10.447 5.324-20.338 15.781-22.074 11.742-1.958 24.483-3.07 37.856-3.309 0.115-0.009 0.231-0.009 0.345-0.009 39.276 0 68.948 10.563 84.941 29.97 27.898 5.775 49.177 20.204 63.308 42.95 33.136 53.34 14.697 135.594 5.085 168.913 7.013 9.45 11.897 23.293 9.795 40.964-2.341 19.407-7.78 34.652-16.185 45.338-4.02 5.123-8.73 9.19-13.872 12.068-5.439 26.19-19.187 57.408-34.373 73.323-0.009 2.187-0.029 4.336-0.048 6.447-0.143 16.079-0.269 30.066 1.199 47.958 9.709 21.239 43.085 34.412 78.35 48.332 31.044 12.251 66.233 26.133 94.304 48.831 33.846 27.361 51.593 62.396 54.261 107.111 0.317 5.276-1.564 10.457-5.19 14.303z"></path></svg>
        <span slot="title">通讯录</span>
      </el-menu-item>
      <el-menu-item index="5" route="/" @click='logOut' class="delete" title="删除用户">
        <i class="el-icon-delete"></i>
        <span slot="title">退出</span>
      </el-menu-item>
    </el-menu>
  </div>
</template>
<script>
import { mapActions, mapGetters } from 'vuex'
export default {
  data () {
    return {
      isCollapse: true,
      router: true,
      defaultActive: 2
    }
  },
  computed: {
    thisRoute () {
      return this.$route.path
    },
    ...mapGetters(['userList', 'user'])
  },
  created () {
    const path = this.$route.path
    if (path.match(/\/write/)) {
      this.defaultActive = '1'
    } else if (path.match(/\/letter/)) {
      this.defaultActive = '2'
    } else if (path.match(/\/addressList/)) {
      this.defaultActive = '4'
    } else if (path.match(/\/setting/)) {
      this.defaultActive = '5'
    } else {
      this.defaultActive = '2'
    }
  },
  methods: {
    change (_user) {
      if (this.user.email !== _user.email) {
        this.changeUser(_user)
        this.$router.push('/letter')
      }
    },
    addUser () {
      this.showLogin()
    },
    logOut () {
      this.logOut()
      return false
    },
    ...mapActions(['showLogin', 'changeUser', 'logOut'])
  }
}
</script>
<style>
.slide, .el-menu-slide {
  height: 100%;
  cursor: default;
}
.slide .el-menu-slide .logo {
  text-align: center;
  padding-top: 10px;
}
.el-menu-slide .el-menu-item i {
  color: #c7c7c7;
}
.el-menu-slide .el-menu-item>div {
  outline: none;
}
.el-menu-slide .el-submenu {
  user-select: none;
  -webkit-user-drag: none;
}
.el-menu-slide .delete{
  position: absolute;
  width: 100%;
  bottom: 0;
}
.el-menu-slide .el-icon-close, .el-my-close {
  transform: rotate(45deg);
}
.el-menu-slide .svg-icon {
  width: 1.5em;
  height: 1.5em;
  vertical-align: middle;
  fill: #c7c7c7;
  overflow: hidden;
}
.el-menu-slide .is-active .svg-icon {
  fill: #409EFF;
}
</style>
